---
title: Animations
description: Learn how to customize animations in Chakra UI
---

:::info

Please read the [overview](/docs/theming/customization/overview) first to learn
how to properly customize the styling engine, and get type safety.

:::

## Example

Here's an example of how to customize keyframes in Chakra UI.

```tsx title="theme.ts"
import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const config = defineConfig({
  theme: {
    keyframes: {
      wiggle: {
        "0%, 100%": { transform: "rotate(-3deg)" },
        "50%": { transform: "rotate(3deg)" },
      },
    },
    tokens: {
      animations: {
        wiggle: { value: "wiggle 1s infinite" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)
```

## Usage

Set the value value of `animationName` or `animation` style prop to apply the
keyframes and animation respectively.

```tsx title="app.tsx"
<Box animation="wiggle" />
<Box animationName="wiggle" animationDuration="fast" animationIterationCount="infinite" />
```
